<template>
	<div class="login-container">
		<el-row>
			<el-col :span="12" :xs="0"></el-col>
			<el-col :span="12" :xs="24">
				<div class="login-box">
					<h1>Hello</h1>
					<h2>欢迎来到硅谷甄选运营管理平台</h2>
					<el-form ref="formRef" :model="formData" :rules="formRules" size="large">
						<el-form-item prop="username">
							<el-input v-model.trim="formData.username" placeholder="请输入账号" :prefix-icon="User"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input
								v-model.trim="formData.password"
								placeholder="请输入密码"
								:prefix-icon="Lock"
								:show-password="true"
							></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="login">登 录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
	export default {
		name: 'Login',
	}
</script>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { ElNotification, ElMessage } from 'element-plus'
	import { User, Lock } from '@element-plus/icons-vue'
	import { useRouter } from 'vue-router'
	import useUserStore from '@/store/modules/user'
	import { getHour } from '@/utils/time'

	// 路由器
	const router = useRouter()
	// userStore
	const userStore = useUserStore()
	// el-form组件实例
	const formRef = ref()
	// 表单数据
	const formData = reactive({
		username: 'Alan_Hu',
		password: '111111',
	})
	// 账号输入框的校验规则函数
	function validatorUsername(rule: any, value: any, callback: any) {
		if (value === '') {
			callback(new Error('请输入账号'))
		} else if (value.length < 5 || value.length > 11) {
			callback(new Error('长度应在5-11位之间'))
		} else {
			callback()
		}
	}

	// 表单校验规则
	const formRules = {
		username: [{ validator: validatorUsername, trigger: 'change' }],
		password: [
			{ required: true, message: '请输入密码', trigger: 'blur' },
			{ min: 6, max: 12, message: '长度应在6-12位之间', trigger: 'change' },
		],
	}

	// 登录按钮回调
	function login() {
		formRef.value.validate(async (valid: boolean) => {
			if (valid) {
				try {
					await userStore.handlerLogin(formData)
					let redirect = router.currentRoute.value.query.redirect
					if (!redirect) {
						// 跳转首页
						router.push({ name: 'layout' })
					} else {
						router.push(redirect)
					}
					// 展示通知
					ElNotification({
						type: 'success',
						title: `Hi，${getHour()}好`,
						message: '欢迎回来',
					})
				} catch (error: any) {
					ElMessage({
						type: 'error',
						message: error.message,
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		background-image: url('@/assets/images/background.jpg');
		background-repeat: no-repeat;
		background-size: cover;

		.login-box {
			width: 600px;
			padding: 40px;
			color: #fff;
			background-image: url('@/assets/images/login_form.png');
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			top: 25vh;

			h1 {
				font-size: 40px;
			}
			h2 {
				font-size: 20px;
				margin: 20px 0;
			}

			.el-button {
				width: 100%;
			}
		}
	}
</style>
